<template>
  <div style="background: white">
    <div style="display:flex;margin: 15px 120px;">
      <el-link icon="el-icon-upload" style="font-size: 36px;color: blue"></el-link>
      <el-link style="font-size: 20px">下载地址</el-link>
    </div>

    <div style="display:flex;margin: 15px 10px;flex-direction: column">
      <div v-for="(item, i) in downloadLists" :key="i" style="display: flex;flex-direction: row;margin: 5px 0"
           @click="handleClick(item.uri)">
        <img :src="item.img ? IMAGE_URL + item.img : require('@/assets/imgs/baidu.png')" style="width: 66px;height: 60px">
        <div style="display: flex;flex: 1;flex-direction: column;">
          <!--          第一行区域-->
          <div style="display: flex">
            <div style="font-weight: bold;font-size: 18px;margin-left: 12px">{{ item.channels.name }}</div>
            <div style="font-size: 15px">（ {{ item.channels.slugName }} ）</div>
          </div>
          <!--      第二行区域    -->
          <div class="time">发布时间：{{ item.channels.createTime }}</div>
          <div class="updateTime">更新时间：
            <span v-if="item.updateTime">{{ item.channels.updateTime }}</span>
            <span v-else>暂无</span>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
import config from "../../../config";

export default {
  name: "Download",
  data() {
    return {
      IMAGE_URL: config.IMAGE_URL,
      form: {
        // downloadLists: this.$route.query.downloadLists,
        id: this.$route.query.id,
      },
      downloadLists: []
    }
  },
  created() {
    this.loadDownload()
    // this.form.downloadLists = this.$route.query.downloadLists;
  },
  methods: {
    loadDownload() {
      this.$request.get(`/apis/downResources/${this.form.id}`).then(res => {
        this.downloadLists = res.data
      })
    },
    handleClick(uri) {
      // 这里可以处理URI，比如导航到该URI或触发下载
      window.location.href = uri; // 导航到URI
      // 或者使用window.open(uri, '_blank'); 来在新标签页中打开
    }
  }
}
</script>

<style scoped>
.time {
  font-size: 15px;
  margin-top: 10px;
  margin-left: 12px;
}

.updateTime {
  font-size: 15px;
  margin: 8px 12px;
}
</style>